<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="产品编号">
      <el-input v-model="formInline.cropsId" placeholder="产品编号"></el-input>
    </el-form-item>
    <el-form-item label="产品名称">
      <el-input v-model="formInline.cropsName" placeholder="产品名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="load">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%">
    <el-table-column
        prop="cropsId"
        label="产品编号">
    </el-table-column>
    <el-table-column
        prop="cropsName"
        label="产品名称">
    </el-table-column>
    <el-table-column
        prop="farmerDept"
        label="产品来源">
    </el-table-column>
    <el-table-column
        prop="time"
        label="时间">
    </el-table-column>
    <el-table-column
        prop="retailerReceiveStatus"
        label="签收状态">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.retailerReceiveStatus==1">已签收</el-tag>
        <el-tag v-if="scope.row.retailerReceiveStatus!=1">未签收</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope" >
        <el-button size="mini" type="text" v-if="scope.row.retailerReceiveStatus!=1" @click="qianshou(scope.row)">签收</el-button>
        <el-button size="mini" type="text" @click="generateQrCode(scope.row)">生成溯源码</el-button>
        <el-button v-if="scope.row.retailerReceiveStatus==1" size="mini" type="text" @click="syid(scope.row)">获取产品溯源ID</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--溯源id-->
  <el-dialog center title="产品溯源ID" :visible.sync="traceIdDialog" width="500px" append-to-body>
    <json-viewer :value="retailerInfo.product_id" expand-depth=5 copyable boxed></json-viewer>
  </el-dialog>
<!--  溯源码-->
  <el-dialog title="二维码" :visible.sync="qrOpen" width="200px" >
    <div id="qrcode" ref="qrcode"></div>
  </el-dialog>
<!--  分页-->
  <el-pagination
      @current-change="goPage"
      :page-size="size"
      layout="total, prev, pager, next"
      :total="total">
  </el-pagination>
</div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "RetailIndexView",
  data(){
    return{
      tableData:[],
      formInline:{},
      size:10,
      current:1,
      total:0,
      traceIdDialog:'',
      retailerInfo: {},
      qrOpen:''
    }
  },
  created() {
    this.load();
    this.traceIdDialog=false
    this.qrOpen=false
  },
  methods:{
    //生成产品溯源码
    generateQrCode(row){
      this.qrOpen=true
      document.getElementById('qrcode').innerHTML = ''
      let url= 'http://1.117.208.193:12011/#/login?redirect=%2Findex'
      let qrcode = new QRCode('qrcode', {
        width: 150, //图像宽度
        height: 150, //图像高度
        colorDark : "#000000", //前景色
        colorLight : "#ffffff", //背景色
        typeNumber:4,
        correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      })
      qrcode.clear() //清除二维码
      qrcode.makeCode(url) //生成另一个新的二维码

    },

    load(){
      this.axios.get("/retail/retail/listRetail",{params:{size:this.size,current:this.current,cropsId:this.formInline.cropsId,cropsName:this.formInline.cropsName}}).then(res=>{
        this.tableData=res.data.data.records
        this.total=res.data.data.total
      })
    },
    qianshou(row){
      const retailerArray = []
      const id = new this.$snowFlakeId().generate();
      retailerArray.push(id)
      retailerArray.push(id)
      retailerArray.push(row.cropsId)
      retailerArray.push("邢赛")
      retailerArray.push("xingsai")
      retailerArray.push("13512634569")
      retailerArray.push("桂林销售点")
      retailerArray.push('零售商售卖')
      this.$confirm('是否确认签收'+row.cropsName, '签收', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            this.$httpBlock
                .post(this.$httpUrl + '/retailerapi/createRetailer', { retailerArray: retailerArray })
                .then(res => {
                  if (res.status === 200) {
                    // const info = {
                    //   cropsId:row.cropsId,
                    //   factoryId:this.$store.getters.deptId,
                    // }
                    this.axios.get("/retail/retail/updateStatus?id="+row.id).then(res=>{
                      if (res.data.code==200){
                        this.$message.success("签收成功")
                        this.load()
                      }else {
                        this.$message.success("失败")
                      }
                    })
                  }
                })
                .catch(err => {
                  this.$message.error('存储异常 ' + err);
                });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消'
            });
          });
    },
    goPage(page){
      this.current=page
      this.load()
    },
    //获取产品溯源ID
    syid(row){
      const retailerArray = []
      retailerArray.push(row.cropsId)
      retailerArray.push("xingsai")
      this.$httpBlock
          .get(this.$httpUrl + '/retailerapi/queryRetailerByCropsId?cropsId='+row.cropsId+'&retailerId=xingsai')
          .then(res => {
            if (res.data.length < 1){
              this.$message.error("请先签收后再获取");
            }else {
              this.traceIdDialog = true
              this.retailerInfo = res.data[0].Record;
            }

          })
          .catch(err => {
            this.$message.error('存储异常 ' + err);
          });
    },

  }
}
</script>

<style scoped>

</style>
